<template>
  <div class="validate">
    <div class="item">
      <div class="label required">活动名称</div>
      <div class="content border" :class="{ 'err':errList.includes('name') }">
        <input v-model="formData.name" />
      </div>
      <p class="tip" v-if="errList.includes('name')">活动名称为必填</p>
    </div>
    <div class="item">
      <div class="label required">活动区域</div>
      <div class="content border" :class="{ 'err':errList.includes('zone') }">
        <select v-model="formData.zone">
          <option disabled value="">请选择</option>
          <option value="bj">北京</option>
          <option value="sh">上海</option>
        </select>
      </div>
      <p class="tip" v-if="errList.includes('zone')">活动区域为必填</p>
    </div>
    <div class="item">
      <div class="label">即时配送</div>
      <div class="content">
        <input type="checkbox" v-model="formData.isInstant">
      </div>
    </div>
    <div class="item">
      <div class="label required">活动性质</div>
      <div class="content">
        <label v-for="d in propsList" :key="d.value">
          <input type="checkbox" :value="d.value" v-model="formData.propsList" />{{d.name}}
        </label>
      </div>
      <p class="tip" v-if="errList.includes('propsList')">活动性质至少填一项</p>
    </div>
    <div class="item">
      <div class="label required">特殊资源</div>
      <div class="content">
        <label>
          <input type="radio" value="a" v-model="formData.special">品牌赞助
        </label>
        <label>
          <input type="radio" value="b" v-model="formData.special">场地免费
        </label>
      </div>
      <p class="tip" v-if="errList.includes('special')">特殊资源至少填一项</p>
    </div>
    <div class="item">
      <div class="label required">活动形式</div>
      <div class="content border">
        <textarea v-model="formData.info"></textarea>
      </div>
      <p class="tip" v-if="errList.includes('info')">活动形式为必填</p>
    </div>
     <div class="item">
      <div class="label"></div>
      <div class="content">
        <button @click="submit">提交</button>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <button>重置</button>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data(){
      return {
        formData:{
          name: '',
          zone: '',
          isInstant: false,
          propsList: [],
          special: '',
          info: ''
        },
        //活动性质的备选项
        propsList:[
          {
            name:"线上推广",
            value:'online'
          },
          {
            name:"地推活动",
            value:'offline'
          },
          {
            name:"百度推广",
            value:"baidu"
          }
        ],
        errList:[]
      }
    },
    methods:{
      submit(){
        //过滤出所有的空项
        const arr =Object.entries(this.formData).filter(i=>{
            const v = i[1]
            if(typeof v ==='string' && !v)return true
            if(Array.isArray(v) && !v.length) return true
            return false;
        }).map(i=>i[0])
        this.errList=arr
        }
    }
  }
</script>

<style lang="sass" scoped>
.validate
  width: 600px
  border: 1px solid #666
  border-radius: 3px
  padding: 20px
  margin: 0 auto
  .item
    position: relative
    display: flex
    margin-bottom: 30px
  .tip
    position: absolute
    left: 150px
    bottom: -25px
    color: red
    font-size: 12px
  .label
    width: 150px
    &.required:before
      content: "*"
      color: red
      position: fixed
      left:45px
  .content
    flex: 1  //flex: 1 1 0
    // flex-grow: 1
    // flex-shrink: 1
    // flex-basis: auto
    text-align: left
    &.border
      border: 1px solid #666
      border-radius: 3px
      &.err
        border-color: red
      input,textarea,select
        background: transparent
        width: 100%
        height: 100%
        box-sizing: border-box
        padding: 0 5px
        &:focus
          outline: none
      textarea
        height: 80px
</style>
